<template>
  <view class="bottom-tab">
    <view
      :class="
        item.center == true ? 'bottom-tab-item-center' : 'bottom-tab-item-sider'
      "
      @click="changeTap(item)"
      v-for="(item, index) in tabList"
      :key="index"
    >
      <image v-if="curIdx == item.id" class="first-img" :src="item.imgOn" />
      <image
        v-if="curIdx != item.id"
        class="first-img"
        :src="item.imgOff"
        @click="changeTap(item)"
      ></image>
      <text v-if="index == 2" class="text-position" style="color: #000">{{
        item.name
      }}</text>
      <text
        v-else
        :class="curIdx == item.id ? 'text-position text-on' : 'text-position'"
        >{{ item.name }}</text
      >
    </view>
  </view>
</template>

<script>
import { uNavigateTo, uSwitchTab } from "../../utils/uniUtils";

export default {
  name: "LiTabBar",
  props: {
    curIdx: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      tabList: [
        {
          id: 0,
          name: "首页",
          imgOff: "/static/image/indexMenus/icon-index-n.png",
          imgOn: "/static/image/indexMenus/icon-index.png",
          page: "/pages/tab_bar/index",
        },
        {
          id: 1,
          name: "集卡活动",
          imgOff: "/static/image/indexMenus/icon-card2-n.png",
          imgOn: "/static/image/indexMenus//icon-card2.png",
          page: "/pages/tab_bar/fl",
        },
        {
          id: 2,
          name: "会员码",
          imgOff: "/static/image/ewm.png",
          imgOn: "/static/image/ewm.png",
          page: "/pages/tab_bar/member-code",
          center: true,
        },
        {
          id: 3,
          name: "积分兑换",
          imgOff: "/static/image/indexMenus/icon-bag-n.png",
          imgOn: "/static/image/indexMenus/icon-bag.png",
          page: "/pages/tab_bar/cart",
        },
        {
          id: 4,
          name: "我的",
          imgOff: "/static/image/indexMenus/icon-my-n.png",
          imgOn: "/static/image/indexMenus/icon-my.png",
          page: "/pages/tab_bar/my",
        },
      ],
    };
  },
  methods: {
    $redirect(_url) {
      uni.redirectTo({
        url: _url,
      });
    },
    changeTap(e) {
      // console.log(e, "page");
      if (e.id == this.curIdx) {
        return;
      }
      if (e.id == 2) {
        uNavigateTo("/pages/tab_bar/member-code");
      } else uSwitchTab(this.tabList[e.id].page);
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-tab {
  position: fixed;
  z-index: 99999;
  background-color: #fdfdfd;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 2.9rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  .bottom-tab-item-center {
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .first-img {
      width: 2.6rem;
      height: 2.6rem;
      margin-top: -0.8rem;
      border-radius: 50%;
      background-color: #ffe423;
      box-sizing: border-box;
      padding: 0.6rem;
    }
    .text-position {
      margin-top: 0rem;
      font-size: 0.6rem;
      color: #757575;
    }
    .text-on {
      color: #dd524d;
    }
  }

  .bottom-tab-item-sider {
    width: 19%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .first-img {
      width: 1.5rem;
      height: 1.5rem;
    }
    .text-position {
      margin-top: 0rem;
      font-size: 0.6rem;
      color: #757575;
    }
    .text-on {
      color: #dd524d;
    }
  }
}
</style>
